<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
    <!--Vue.js 组件
    组件（Component）是 Vue.js 最强大的功能之一。

    组件可以扩展 HTML 元素，封装可重用的代码。

    组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树-->

    <!--注册一个全局组件语法格式如下：

    Vue.component(tagName, options)
    tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：

    <tagName></tagName>-->
    <div id="app">
        <runoob></runoob>
    </div>

    <div id="app1">
        <runoob1></runoob1>
    </div>


    <script>
        // 注册
        Vue.component('runoob', {
            template: '<h1>自定义组件!</h1>'
        })
        //全局组件
        // 创建根实例
        var app = new Vue({
            el: '#app'
        });

        // 局部组件 实例选项中注册局部组件，这样组件只能在这个实例中使用
        var Child = {
            template: '<h1>自定义组件!</h1>'
        }

        // 创建根实例
        var app1 = new Vue({
            el: '#app1',
            components: {
                // <runoob> 将只在父模板可用
                'runoob1': Child
            }
        })

    </script>
</body>
</html>